<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
</head>

<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar layui-form-pane" style="padding: 13px 0;">
                <div class="layui-inline">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-inline mr0 clear-input">
                        <input id="menuEdtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="menuBtnSearch" class="layui-btn icon-btn">查询
                    </button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="btn-expand">全部展开</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="btn-fold">全部折叠</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="btn-refresh">刷新表格</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="btn-add"><i class="layui-icon">&#xe654;</i>添加</button>
                </div>
            </div>

            <table id="table1" class="layui-table" lay-filter="table1"></table>
        </div>
    </div>
</div>

<!-- 操作列 -->
<script type="text/html" id="oper-col">
    <a class="layui-btn-a layui-btn-primary" lay-event="edit" style="color: #fff">修改</a>
    <a class="layui-btn-a" lay-event="del" style="background-color: #FF794E; color: #fff">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="menuForm">
    <form lay-filter="menuForm" class="layui-form model-form">
        <input name="menu_id" type="hidden"/>
        <input name="authority_id" type="hidden"/>
        <div class="layui-form-item" style="margin-top: 15px;">
            <label class="layui-form-label"><span class="txt-impt">*</span>上级菜单</label>
            <div class="layui-input-block">
                <select name="parent_id" lay-verify="required" id="parent_id" lay-search>
                    <option value="" selected>选择上级菜单</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="txt-impt">*</span>权限名称</label>
            <div class="layui-input-block">
                <input name="menu_name" placeholder="请输入权限名称" type="text" class="layui-input"
                       maxlength="20" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="txt-impt">*</span>菜单URL</label>
            <div class="layui-input-block">
                <input lay-verify="required" name="menu_url" placeholder="请输入菜单url" type="text" class="layui-input"
                       maxlength="200"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="txt-impt">*</span>菜单图标</label>
            <div class="layui-input-block">
                <input name="menu_icon" placeholder="请输入菜单图标" lay-verify="required" type="text" class="layui-input"
                       maxlength="80"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="txt-impt">*</span>排序号</label>
            <div class="layui-input-block">
                <input name="sort_number" placeholder="请输入排序号" type="number" class="layui-input"
                       max="100" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" type="button" lay-filter="menuFormSubmit" style="margin-right: 20px;" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>

<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../jsplug/xm-select.js"></script>

<script>
    layui.use(['layer', 'form', 'table','admin','treetable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        form.render();
        var table = layui.table;
        var admin = layui.admin;
        var treetable = layui.treetable;
        var selectOption = layui.selectOption;
        var mMenus = [];  // 全部菜单
        $(".layui-breadcrumb").find("a").first().html("<i class='layui-icon layui-icon-refresh-3'></i>")
        $(".layui-breadcrumb").find("a").first().attr("href","javascript:void(0);");
        $(".layui-breadcrumb").find("a").first().attr("ew-event","refresh");

        // 渲染表格
        var renderTable = function () {
            // layer.load(2);·
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'menu_id',
                treePidName: 'parent_id',
                treeDefaultClose: false,
                treeLinkage: false,
                elem: '#table1',
                url: access_baseurl + 'Sysmenu/lst.html',
                page: false,
                where:{keyword:$('#menuEdtSearch').val()},
                cols: [[
                    {type: 'numbers'},
                    {field: 'menu_name', title: '权限名称'},
                    {field: 'menu_url', title: '菜单url'},
                    {field: 'menu_icon', title: '菜单图标',templet: function(d){
                            return "<xmp style='margin: 0;'>"+d.menu_icon+"</xmp>";
                        }
                    },
                    {field: 'sort_number', title: '排序号',width:90},
                    {field: 'ismenu', title: '类型' ,width:90,templet: function(d){
                            if(d.ismenu == 2) return '菜单';
                            if(d.ismenu == 1) return '按钮';
                        }
                    },
                    {templet: '#oper-col', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        $('#btn-expand').click(function () {
            treetable.expandAll('#table1');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#table1');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });
        renderTable();

        // 搜索按钮点击事件
        $('#menuBtnSearch').click(function () {
            // var keyword = $('#menuEdtSearch').val();
            // tableIns.reload('table1', {where: {keyword: keyword}});
            renderTable();
        });

        // 添加按钮点击事件
        $('#btn-add').click(function () {
            showEditModel();
        });
        //监听工具条
        table.on('tool(table1)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            }
        });

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                send_req('Sysmenu/del.html', {menu_id: obj.data.menu_id}, function(){
                    layer.closeAll('loading');
                    layer.msg("删除成功",{ icon: 1, time: 1000 });
                    renderTable();
                })
            });
        }
        // 显示编辑弹窗
        function showEditModel(menu) {
            admin.open({
                type: 1,
                area: '360px',
                offset: '65px',
                title: (menu ? '修改' : '添加') + '菜单',
                content: $('#menuForm').html(),
                success: function () {
                    new_send_req('Sysmenu/lst.html', {}, function(data){
                        $("#parent_id").empty();
                        $("#parent_id").append("<option value='0'>选择上级菜单</option>");
                        data.data.forEach((ele, index) => {
                            var optionStr = "<option ";

                            if(menu && menu.parent_id === ele.menu_id){
                                optionStr += " selected ";
                            }

                            optionStr += "value='"+ele.menu_id+"'>"+ele.menu_name+"</option>";
                            $("#parent_id").append(optionStr);
                        })
                        form.render('select');
                    },false)

                    if(menu){
                        $("#parent_id").val(menu.parent_id);
                        form.val('menuForm', menu);
                    }

                    // 表单提交事件
                    form.on('submit(menuFormSubmit)', function (d) {
                        d.field.parent_name = $("#parent_id option:selected").text();
                        layer.load(2);
                        new_send_req('Sysmenu/add_or_save.html', d.field, function(data){

                            layer.closeAll('loading');
                            if (data.success === undefined || data.success === true) {
                                renderTable();
                                layer.closeAll();
                            } else {
                                layer.msg(data.msg, { icon: 2, time: 1000 });
                            }
                        })
                    });
                }
            });
        }

    });
</script>

</body>
</html>